<template>
  <div class="content">
    <div class="h3">
      <h3>购买指南</h3>
      <span>更新时间：2022-11-07 14:45</span>
    </div>
    <div class="doc_content">
      <div class="doc">
        <h4>产品价格</h4>
        <table class="table">
          <tbody>
            <tr class="tr">
              <td>
                <p class="p">
                  <b class="b">产品</b>
                </p>
              </td>
              <td>
                <p class="p">
                  <b class="b">刊例价（元/次）</b>
                </p>
              </td>
            </tr>
            <tr class="tr two">
              <td>
                <p class="p">
                  <b class="b"> 全流程存证 </b>
                </p>
              </td>
              <td>
                <p class="p">
                  <b class="b">5</b>
                </p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="doc">
        <h4>计费说明</h4>
        <p>一次全流程存证计费一次。</p>
        <p>
          即，全流程存证实例创建成功做一次计费，具体的分阶段存证不独立计费。
        </p>
      </div>
      <div class="doc">
        <h4>购买方式</h4>
        <div class="blue">
          <svg
            t="1682403322854"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3749"
            data-spm-anchor-id="a313x.7781069.0.i7"
            width="200"
            height="200"
          >
            <path
              d="M463.99957 784.352211c0 26.509985 21.490445 48.00043 48.00043 48.00043s48.00043-21.490445 48.00043-48.00043c0-26.509985-21.490445-48.00043-48.00043-48.00043S463.99957 757.842226 463.99957 784.352211z"
              fill="#11a2db"
              p-id="3750"
            ></path>
            <path
              d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128.287273c-211.584464 0-383.712727 172.128262-383.712727 383.712727 0 211.551781 172.128262 383.712727 383.712727 383.712727 211.551781 0 383.712727-172.159226 383.712727-383.712727C895.712727 300.415536 723.551781 128.287273 512 128.287273z"
              fill="#11a2db"
              p-id="3751"
            ></path>
            <path
              d="M512 673.695256c-17.664722 0-32.00086-14.336138-32.00086-31.99914l0-54.112297c0-52.352533 39.999785-92.352318 75.32751-127.647359 25.887273-25.919957 52.67249-52.67249 52.67249-74.016718 0-53.343368-43.07206-96.735385-95.99914-96.735385-53.823303 0-95.99914 41.535923-95.99914 94.559333 0 17.664722-14.336138 31.99914-32.00086 31.99914s-32.00086-14.336138-32.00086-31.99914c0-87.423948 71.775299-158.559333 160.00086-158.559333s160.00086 72.095256 160.00086 160.735385c0 47.904099-36.32028 84.191695-71.424378 119.295794-27.839699 27.776052-56.575622 56.511974-56.575622 82.3356l0 54.112297C544.00086 659.328155 529.664722 673.695256 512 673.695256z"
              fill="#11a2db"
              p-id="3752"
            ></path>
          </svg>
          <div class="contentSpan">
            <strong>说明</strong>
            <p>
              在购买全流程存证产品前
              ①您需要先加入航式认证版权平台并开通租户，详见“
              <span @click="go">登录注册</span> ”；
              ②请通过官网与我们联系，商务人员将协助您对业务场景进行评估，以确保您购买的产品满足自身需求。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script setup lang='ts'>
import { useRouter } from "vue-router";
const router = useRouter();
const go = () => {
  window.sessionStorage.setItem("nav", "/homeview/doc/login_reg");
  router.push("/homeview/doc/login_reg");
};
</script>
    
<style scoped lang='less'>
.content {
  .h3 {
    border-bottom: 1px solid #ebedf0;
    padding: 20px;
    h3 {
      font-size: 26px;
      font-weight: 600;
    }
    span {
      font-size: 14px;
    }
  }
  .doc_content {
    padding: 20px;
    .doc {
      margin-bottom: 40px;
      h4 {
        font-weight: 550;
        margin-bottom: 8px;
      }
      p {
        font-size: 14px;
      }
      .table {
        display: table;
        width: 100%;
        overflow: auto;
        margin-top: 16px;
        margin-bottom: 16px;
        line-height: 26px;
        border-collapse: collapse;
        border-spacing: 0;
        .tr {
          background-color: #fff;
          border-top: 1px solid #ccc;
          td {
            min-width: 90px;
            padding: 4px 8px;
            word-break: break-word;
            border: 1px solid #ddd;
            .p {
              margin: 8px 0;
              padding: 2px 0;
              color: #0d1a26;
              font-weight: 400;
              font-size: 14px;
              line-height: 26px;
            }
          }
        }
        .two {
          background-color: #f8f8f8;
        }
      }
      .blue {
        height: 85px;
        background-color: hsla(197, 94%, 53%, 0.1);
        display: flex;
        padding: 15px;
        svg {
          width: 20px;
          height: 20px;
        }
        .contentSpan {
          span {
            color: blue;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>